<div id="app">
    <div class="login" v-show="false" v-cloak>
        <div class="layui-form-item div-name">  
            <label class="layui-form-label">邮箱</label>  
            <div class="layui-input-block">  
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" v-model="username" class="layui-input">  
            <button class="layui-btn layui-btn-normal send-btn" v-on:click="send()">发送</button> 
            </div>  
        </div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">密码</label>  
            <div class="layui-input-block">  
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码/验证码" autocomplete="off" class="layui-input">  
            </div>  
        </div>  
        <div class="layui-form-item">  
            <div class="layui-input-block">  
                <button class="layui-btn layui-btn-normal login-btn">登录</button> 
            </div>  
        </div>
    </div>

    <div class="search">
        <div class="website">
            <a :href="url" target="_blank"><span>官网</span></a>
        </div>
        <div class="search-inp">
            <input type="text" placeholder="请输入名称..." v-on:change="search()" v-model="title" autocomplete="off" class="layui-input">
        </div>
        <div v-show="token" v-cloak>
            <button class="layui-btn layui-btn-normal" v-on:click="logout()">退出</button>
        </div>
    </div>
    <div class="main" v-cloak>
        <div class="card" v-for="(item, index) in softwares" v-cloak>
            <div class="top">
                <a v-on:click="goAppInfo(this.url + '/pc/home/detail.html?id=' + item.id)" target="_blank"><img :src=this.url+item.image alt=""></a>
            </div>
            <div class="center">
                <span>@{{item.title}} v@{{item.version}}</span>
                <a :href="'https://wpa.qq.com/msgrd?v=3&uin=' + item.author + '&site=qq&menu=yes&jumpflag=1'" target="_blank" title="点击发起聊天" style="color: #fff"><img class="img" :src="this.url+item.avatar" alt=""></a>
            </div>
            <div class="bottom">
                <div>
                    <img class="img-icon" src="/vendor/mango/down.png" alt=""> @{{item.sales}} 
                    <span v-show="item.iversion" class="mgl10">
                        <img class="img-icon" src="/vendor/mango/version.png" alt=""> 
                        <span :class="item.version > item.iversion ? 'green' : ''" v-on:click="updateInstall(item)"> @{{item.iversion}}
                        </span>
                </span>
                </div>
                <div class='uninstall' v-show="item.iversion" v-on:click="uninstall(item.name, item.paceapps_name, item.describe)">卸载</div>
                <div class='install' v-show="!item.iversion" v-on:click="find(item)">安装</div>
            </div>
        </div>
    </div>
</div>
<script>
    // js代码也可以放在模板里面
    var token = localStorage.getItem('token')

    const VueApp = {
        data() {
            return {
                url: "{{$url}}",
                softwares: [],
                title: '',
                token:localStorage.getItem('token'),
                username:''
            }
        },
        methods: {
            // 发送验证码
            send(){
                let that = this
                axios.get('/admin/weipu/send_code', {
                    params: {
                        email: this.username
                    }
                })
                .then(function(response) {
                    layer.msg(response.data.msg)
                })
                .catch(function(error) {
                    console.log(error);
                });
            },
            updateInstall(item){
                var that = this
                if (item.version > item.iversion) {
                    layer.confirm('是否升级应用？', {
                        title:'升级应用',
                        icon: 3
                    }, function(index) {
                        layer.close(index);
                        // 输入安装密码
                        layer.prompt({title: '请输入安装密码', formType: 1}, function(pass, index){
                            that.installPlug(item.name, pass)
                            layer.close(index);
                        });
                    }, function() {
                        // layer.msg('取消安装');
                    });
                }
            },
            goAppInfo(path){
                layer.confirm('是否跳转到应用详情？', {
                    title:'跳转',
                    icon: 3
                }, function(index) {
                    layer.close(index);
                    window.open(path, '_blank');
                }, function() {
                    // layer.msg('取消安装');
                });
            },
            // 查找当前软件的信息
            find(item) {
                // 询问是否安装
                var that = this
                var discount_price = item.discount_price > 0 ? item.discount_price + '元' : '';
                layer.confirm('是否下载并安装当前插件？', {
                    title:item.title + discount_price,
                    icon: 3
                }, function(index) {
                    layer.close(index);
                    // 输入安装密码
                    layer.prompt({title: '请输入安装密码', formType: 1}, function(pass, index){
                        that.installPlug(item.name, pass)
                        layer.close(index);
                    });
                    //  请求接口
                    // that.installPlug(item.name)
                }, function() {
                    layer.msg('取消安装');
                });
                // console.log(item)
            },
            getSoftWares() {
                let that = this
                axios.get('/admin/weipu/get_softwares', {
                        params: {
                            search: this.title
                        }
                    })
                    .then(function(response) {
                        that.softwares = response.data.data
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            search() {
                this.getSoftWares()
            },
            // 下载并安装插件
            installPlug(name, pass) {
                var loadIndex = layer.load(0);
                var that = this
                axios.post('/admin/weipu/install_softwares', {
                        name: name,
                        token:token,   
                        pass:pass
                    })
                    .then(function(response) {
                        layer.close(loadIndex)
                        // 如果登录失效
                        if (response.data.code == 401) {
                            localStorage.clear()
                            window.location.reload()
                        }
                        // 没有买过插件
                        if (response.data.code == 2) {
                            // 开启定时器,打开支付
                            return that.openPayPage(response, pass)
                        }
                        if (response.data.code != 1) {
                            return layer.msg(response.data.msg)
                        }
                        // 安装过
                        if (response.data.data == 'rinstall') {
                            return that.installPlugTwo(name, token, pass)
                        }
                        that.getSoftWares()
                        return layer.msg(response.data.msg)
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            logout(){
                layer.confirm('是否退出登录？', {
                    title:'退出提示',
                    icon: 3
                }, function(index) {
                    localStorage.clear()
                    window.location.reload()
                }, function() {
                });
            },
             // 下载并安装插件
            installPlugTwo(name, token, pass) {
                var loadIndex = layer.load(0);
                // alert(1)
                var that = this
                layer.confirm('是否覆盖文件，更新数据表？', {
                    title:'更新应用',
                    btn: ['继续', '取消',] //可以无限个按钮
                }, function(index, layero){
                    layer.close(index);
                //按钮【按钮一】的回调
                    axios.post('/admin/weipu/install_softwares', {
                            name: name,
                            token:token,
                            rinstall:1,
                            pass:pass
                        })
                        .then(function(response) {
                            layer.close(loadIndex)
                            // 升级支付
                            if (response.data.code == 2) {
                                return that.openPayPage(response, pass)
                            }
                            if (response.data.code != 1) {
                                return layer.msg(response.data.msg)
                            }
                            
                            that.getSoftWares()
                            return layer.msg(response.data.msg)
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                    });
                }, function(index){
                //按钮【按钮二】的回调
                layer.close(index)
            },
            // 打开支付页面
            openPayPage(response, pass){
                var that = this
                return layer.open({  
                    type: 2,  
                    title: response.data.data[0],  
                    content: response.data.data[1],  
                    area: ['330px', '400px'],  
                    shade: 0.5,  
                    success: function(index, layero){  
                        // 执行某些操作后关闭弹窗  
                        that.setTimeFindOrder(response.data.data[2], pass)
                    }  
                });  
            },
            // 定时器监测订单是否支付
            setTimeFindOrder(orderid, pass){
                var that = this
                var time = setInterval(function(){
                    that.getOrderStatus(orderid, time, pass)
                }, 5000)
            },
            getOrderStatus(orderid, time, pass){
                // console.log(orderid, time);
                var that = this
                //  请求接口
                axios.post('/admin/weipu/getOrder', {
                    orderid: orderid,
                    token:token,
                })
                .then(function(response) {
                    // console.log(response.data);
                    if (response.data.code == 1) {
                        // 清理定时器time
                        clearInterval(time)
                        // 重新加载插件
                        that.getSoftWares()
                        // 关闭所有 iframe 层  
                        layer.closeAll('iframe');
                        layer.msg(response.data.msg)
                        that.installPlug(response.data.data, pass)
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
            },
            // 卸载软件
            uninstall(name, paceapps_name, title){
                var that = this
                layer.confirm('是否卸载当前插件？', {
                    title:'卸载应用',
                    icon: 3
                }, function(index) {
                    layer.close(index);
                    layer.prompt({title: '请输入卸载密码', formType: 1}, function(pass, index){
                        that.handelUninstall(name, paceapps_name, title, pass);
                        layer.close(index);
                    });
                }, function() {
                    layer.msg('取消卸载');
                });
               
            },
            // 处理卸载软件
            handelUninstall(name, paceapps_name, title, pass){
                var loadIndex = layer.load(0);
                var that = this
                //  请求接口
                axios.post('/admin/weipu/uninstall_softwares', {
                    name: name,
                    paceapps_name: paceapps_name,
                    title: title,
                    pass: pass
                })
                .then(function(response) {
                    layer.close(loadIndex)
                    if (response.data.code != 1) {
                        return layer.msg(response.data.msg)
                    }
                    that.getSoftWares()
                    return layer.msg(response.data.msg)
                })
                .catch(function(error) {
                    console.log(error);
                });
            },
        },
        // 进入页面加载
        mounted() {
            this.getSoftWares()
        },
    }
    Vue.createApp(VueApp).mount('#app')

    if (!token) {
        var index = layer.open({
            type: 1, // page 层类型，其他类型详见「基础属性」
            title: ['登录', 'font-size: 18px;'],
            content: $('.login'),
            area: ['520px', '330px'],
            anim:1
        });
    }

    // 点击登录
    $('.login-btn').on('click',  function(){
            var username = $("input[name='username']").val()
            var password = $("input[name='password']").val()
            axios.post('/admin/weipu/login_softwares', {
                account: username,
                password: password
            })
            .then(function(response) {
                if (response.data.code != 1) {
                    localStorage.clear()
                    return layer.msg(response.data.msg)
                }

                if (response.data.code == 1) {
                    let userinfo = JSON.stringify(response.data.data)
                    localStorage.setItem('userinfo', userinfo)

                    let token = JSON.parse(userinfo).userinfo.token;
                    localStorage.setItem('token', token)
                    layer.close(index)
                    layer.msg(response.data.msg)
                    setTimeout(function(){
                        window.location.reload()
                    }, 1000)
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    })
    
</script>
<style>
    .mgl10{
        margin-left: 10px;
    }

    .green{
        color: green;
        cursor: context-menu;
    }

    [v-cloak] {
        display: none !important;
    }

    .layui-input{
        width: 90%!important;
    }
    
    
    .div-name{
        margin-top: 30px;
    }
    
    .send-btn{
        position: relative;
        float: right;
        bottom: 38px;
        right: 38px;
    }

    .login-btn{
        width: 300px;
        margin-top: 50px;
        margin-left: 20px;
    }

    #app {
        /* border: red 1px solid; */
    }

    .main {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: 35px;
        flex-wrap: wrap;
    }

    .card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* border: red 1px solid; */
        width: 200px;
        float: left;
        box-shadow: 15px;
        margin-left: 40px;
    }

    .search {
        width: 500px;
        height: 55px;
        position: relative;
        left: 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        top: 5px;
    }

    .search-inp{
        width: 200px;
    }

    .top {
        width: 200px;
        height: 100%;
    }

    .top img {
        width: 100%;
        height: 100%;
    }

    .bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-left: 10px;
        margin-right: 10px;
        padding-bottom: 10px;
    }

    .center {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 20px 5px 20px 10px;
    }

    .uninstall{
        background-color: #c12c1f;
        color: #fff;
        padding: 2px 8px 2px 8px;
        font-size: 12px;
        border-radius: 2px;
    }
    .uninstall:hover{
        cursor:default;
    }

    .install{
        background-color: #b1d5c8;
        color: #fff;
        padding: 2px 8px 2px 8px;
        font-size: 12px;
        border-radius: 2px;
    }
    .install:hover{
        cursor:default;
    }
    
    .website{
        width: 100px;
        text-align: center;
        line-height: 40px;
    }

    .img{
        width: 20px;
        height: 20px;
        margin-right: 15px;
        border-radius: 50%;
    }

    .img-icon{
        width: 15px;
        height: 15px;
    }

    .img-icon:nth-child(2){
        margin-left: 10px;
    }

</style>